<template>
    <el-container>
        <el-header class="header">
            <h1>哲学宗教类书籍阅读</h1>
            <p>探索智慧的光芒，感悟精神的深度</p>
        </el-header>

        <el-main class="container">
            <el-button type="primary" class="back-button" @click="goBack">
                <i class="el-icon-back"></i> 返回分类
            </el-button>

            <div class="filter">
                <el-select v-model="sortBy" placeholder="排序方式" class="filter-item">
                    <el-option label="默认排序" value="default"></el-option>
                    <el-option label="最新更新" value="newest"></el-option>
                    <el-option label="最多阅读" value="most-read"></el-option>
                    <el-option label="评分最高" value="highest-rated"></el-option>
                </el-select>

                <el-select v-model="bookType" placeholder="书籍类型" class="filter-item">
                    <el-option label="全部类型" value="all"></el-option>
                    <el-option label="哲学思想" value="philosophy"></el-option>
                    <el-option label="宗教信仰" value="religion"></el-option>
                    <el-option label="心灵修养" value="mind"></el-option>
                    <el-option label="哲学小说" value="novel"></el-option>
                </el-select>

                <el-input v-model="searchText" placeholder="搜索书籍..." class="filter-item"
                    style="flex: 1; margin: 0 10px;"></el-input>

                <el-button type="primary" icon="el-icon-search" @click="applyFilter">搜索</el-button>
            </div>

            <div class="books-grid">
                <div class="book-card" v-for="book in filteredBooks" :key="book.id" @click="readBook(book)">
                    <div class="book-cover">
                        <img :src="book.cover" :alt="book.title" />
                        <div class="read-label">可在线阅读</div>
                    </div>
                    <div class="book-info">
                        <div class="book-title">{{ book.title }}</div>
                        <div class="book-author">{{ book.author }}</div>
                        <div class="book-desc">{{ book.description }}</div>
                        <div class="book-footer">
                            <div class="book-stats">
                                <i class="el-icon-view"></i> {{ book.views }} 人阅读
                            </div>
                            <button class="read-btn">立即阅读</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="pagination" v-if="totalPages > 1">
                <el-pagination background layout="prev, pager, next" :total="totalItems" :page-size="pageSize"
                    :current-page="currentPage" @current-change="handlePageChange"></el-pagination>
            </div>

            <div class="page-info" v-if="filteredBooks.length === 0">
                <p>暂无符合条件的书籍</p>
            </div>
        </el-main>

        <el-footer>
            <p style="text-align: center; margin: 0; padding: 10px 0; color: #666; font-size: 14px;">
                © 2025 墨韵书坊 版权所有
            </p>
        </el-footer>
    </el-container>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import cunzai from '@/assets/img/cunzai.png'
import chan from '@/assets/img/chan.png'
import bojia from '@/assets/img/bojia.png'
import jidujiao from '@/assets/img/jidujiao.png'
import lixiang from  '@/assets/img/lixiang.png'
import mengzi from '@/assets/img/mengzi.png'
import lunyu from  '@/assets/img/lunyu.png'
import mingxiang from '@/assets/img/mingxiang.png'
import sufei from '@/assets/img/sufei.png'
import xunzi from '@/assets/img/xunzi.png'
import yujia from '@/assets/img/yujia.png'
import zhuangzi from '@/assets/img/zhuangzi.png'
import fujiao from '@/assets/img/fujiao.avif'
import daode from '@/assets/img/daode.jpg'

const router = useRouter();
const route = useRoute();

const sortBy = ref('default');
const bookType = ref('all');
const searchText = ref('');
const currentPage = ref(1);
const pageSize = ref(8);

const philosophyBooks = ref([
    {
        id: 'book001',
        title: '道德经',
        author: '老子',
        cover: daode,
        description: '《道德经》又称《老子》，是中国古代重要的哲学经典之一，分为《道经》和《德经》两部分，共81章，对中国哲学、宗教、政治、文化等方面有着深远的影响。',
        views: 23456,
        type: 'philosophy',
        lastUpdated: '2025-01-15',
        rating: 4.9,
    },
    {
        id: 'book002',
        title: '理想国',
        author: '[古希腊] 柏拉图',
        cover: lixiang,
        description: '《理想国》是柏拉图的代表作之一，探讨了正义、国家、教育、灵魂等哲学主题，通过对理想国家的设想，阐述了柏拉图的哲学思想和政治理想。',
        views: 18923,
        type: 'philosophy',
        lastUpdated: '2024-12-10',
        rating: 4.8,
    },
    {
        id: 'book003',
        title: '佛教的智慧',
        author: '一行禅师',
        cover: fujiao,
        description: '《佛教的智慧》是一行禅师的入门级著作，深入浅出地讲解了佛教的核心思想和修行方法，帮助读者理解佛教的本质，培养内心的平静与智慧。',
        views: 15678,
        type: 'religion',
        lastUpdated: '2025-01-28',
        rating: 4.7,
    },
    {
        id: 'book004',
        title: '庄子',
        author: '庄周',
        cover: zhuangzi,
        description: '《庄子》是道家学派的重要经典之一，以寓言和故事的形式阐述了道家的哲学思想，强调自然、自由、无为，对后世的哲学、文学、艺术产生了深远的影响。',
        views: 17842,
        type: 'philosophy',
        lastUpdated: '2024-11-22',
        rating: 4.6,
    },
    {
        id: 'book005',
        title: '存在的意义',
        author: '[法] 罗曼·罗兰',
        cover: cunzai,
        description: '《存在的意义》探讨了人类存在的价值和意义，通过对历史人物和哲学思想的研究，帮助读者思考生命的意义和人生的方向。',
        views: 16534,
        type: 'philosophy',
        lastUpdated: '2024-10-15',
        rating: 4.5,
    },
    {
        id: 'book006',
        title: '瑜伽经',
        author: '[古印度] 帕坦伽利',
        cover: yujia,
        description: '《瑜伽经》是印度古代瑜伽哲学的重要经典，系统阐述了瑜伽的理论和实践方法，包括道德准则、冥想、体位法等内容，对瑜伽修行者具有重要的指导意义。',
        views: 11245,
        type: 'mind',
        lastUpdated: '2025-01-05',
        rating: 4.8,
    },
    {
        id: 'book007',
        title: '论语译注',
        author: '杨伯峻',
        cover: lunyu,
        description: '《论语》是儒家学派的经典著作之一，记录了孔子及其弟子的言行，集中体现了孔子的政治主张、伦理思想、道德观念及教育原则等。杨伯峻的译注版本通俗易懂，适合初学者阅读。',
        views: 19876,
        type: 'philosophy',
        lastUpdated: '2024-09-08',
        rating: 4.9,
    },
    {
        id: 'book008',
        title: '禅的体验',
        author: '铃木大拙',
        cover: chan,
        description: '《禅的体验》是铃木大拙的代表作之一，深入浅出地介绍了禅宗的基本理念和修行方法，帮助读者理解禅宗的智慧和生活中的应用。',
        views: 13421,
        type: 'religion',
        lastUpdated: '2025-01-18',
        rating: 4.7,
    },
    {
        id: 'book009',
        title: '冥想指南',
        author: '乔·卡巴金',
        cover: mingxiang,
        description: '《冥想指南》是一本实用的冥想入门书籍，详细介绍了冥想的科学依据、方法和实践，帮助读者减轻压力、提高专注力、培养内心的平静和觉知。',
        views: 15432,
        type: 'mind',
        lastUpdated: '2024-12-05',
        rating: 4.6,
    },
    {
        id: 'book010',
        title: '基督教的本质',
        author: '[德] 费尔巴哈',
        cover: jidujiao,
        description: '《基督教的本质》是费尔巴哈的重要著作之一，从哲学和人类学的角度分析了基督教的本质和影响，探讨了宗教与人类之间的关系，是理解宗教哲学的重要作品。',
        views: 16782,
        type: 'religion',
        lastUpdated: '2024-11-18',
        rating: 4.5,
    },
    {
        id: 'book011',
        title: '孟子译注',
        author: '杨伯峻',
        cover: mengzi,
        description: '《孟子》是儒家经典之一，记录了孟子的思想和言行，强调仁义道德和民本思想。杨伯峻的译注版本通俗易懂，有助于读者更好地理解孟子的哲学思想。',
        views: 14321,
        type: 'philosophy',
        lastUpdated: '2024-10-25',
        rating: 4.4,
    },
    {
        id: 'book012',
        title: '苏菲的世界',
        author: '[挪威] 乔斯坦·贾德',
        cover: sufei,
        description: '《苏菲的世界》是一部哲学启蒙小说，通过少女苏菲的视角，带领读者探索西方哲学的发展历程，从古希腊哲学到现代哲学，深入浅出地介绍了许多重要的哲学思想。',
        views: 24567,
        type: 'novel',
        lastUpdated: '2025-01-10',
        rating: 4.8,
    },
    {
        id: 'book013',
        title: '薄伽梵歌',
        author: '[古印度] 克里希那',
        cover: bojia,
        description: '《薄伽梵歌》是印度古代重要的哲学经典之一，以史诗《摩诃婆罗多》为背景，通过克里希那和阿周那的对话，阐述了印度教的哲学思想、人生观和行为准则。',
        views: 13456,
        type: 'religion',
        lastUpdated: '2024-09-15',
        rating: 4.7,
    },
    {
        id: 'book014',
        title: '荀子集解',
        author: '王先谦',
        cover: xunzi,
        description: '《荀子》是战国时期思想家荀况的著作，阐述了荀子的性恶论、礼治思想等哲学观点，对先秦哲学的发展有重要贡献。王先谦的集解版本是研究荀子思想的重要参考书籍。',
        views: 12345,
        type: 'philosophy',
        lastUpdated: '2024-08-10',
        rating: 4.6,
    },
]);

const filteredBooks = computed(() => {
    let result = [...philosophyBooks.value];

    // 搜索结果
    if (searchText.value) {
        const searchRegex = new RegExp(searchText.value, 'i');
        result = result.filter((book) =>
            searchRegex.test(book.title) ||
            searchRegex.test(book.author) ||
            searchRegex.test(book.description)
        );
    }

    // 类型筛选
    if (bookType.value !== 'all') {
        result = result.filter((book) => book.type === bookType.value);
    }

    // 排序
    if (sortBy.value === 'newest') {
        result.sort((a, b) => new Date(b.lastUpdated) - new Date(a.lastUpdated));
    } else if (sortBy.value === 'most-read') {
        result.sort((a, b) => b.views - a.views);
    } else if (sortBy.value === 'highest-rated') {
        result.sort((a, b) => b.rating - a.rating);
    } else {
        // 默认排序方式（按标题字母顺序）
        result.sort((a, b) => a.title.localeCompare(b.title));
    }

    // 分页
    const start = (currentPage.value - 1) * pageSize.value;
    const end = start + pageSize.value;
    return result.slice(start, end);
});

const totalItems = computed(() => philosophyBooks.value.length);
const totalPages = computed(() => Math.ceil(totalItems.value / pageSize.value));

const applyFilter = () => {
    currentPage.value = 1;
};

const handlePageChange = (page) => {
    currentPage.value = page;
};

const goBack = () => {
    router.go(-1);
};

const readBook = (book) => {
    // 这里可以实现跳转到阅读页面的逻辑
    // 例如：router.push(`/read/${book.id}`);
    console.log(`开始阅读《${book.title}》`);
    alert(`开始阅读《${book.title}》`);
};
</script>

<style scoped>
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.header {
    text-align: center;
    margin-bottom: 30px;
}

.header h1 {
    font-size: 28px;
    color: #333;
    margin-bottom: 10px;
}

.header p {
    color: #666;
    font-size: 14px;
}

.filter {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.filter-item {
    margin-bottom: 10px;
}

.books-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.book-card {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: pointer;
}

.book-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.book-cover {
    height: 200px;
    overflow: hidden;
    position: relative;
}

.book-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.book-card:hover .book-cover img {
    transform: scale(1.05);
}

.read-label {
    position: absolute;
    top: 10px;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 4px 10px;
    font-size: 12px;
}

.book-info {
    padding: 15px;
}

.book-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 8px;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 44px;
}

.book-author {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}

.book-desc {
    font-size: 13px;
    color: #777;
    margin-bottom: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 60px;
}

.book-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.book-stats {
    font-size: 13px;
    color: #999;
}

.read-btn {
    background-color: #4a9eff;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: background-color 0.3s;
}

.read-btn:hover {
    background-color: #3a8ee6;
}

.pagination {
    margin-top: 30px;
    display: flex;
    justify-content: center;
}

.page-info {
    margin-top: 20px;
    text-align: center;
    color: #999;
    font-size: 14px;
}

.back-button {
    margin-bottom: 20px;
}
</style>